<template>
  <div class="x-page" :style="{backgroundImage:'url('+titleBg+')'}">
    <div class="title">
        <!-- <span v-if="isShowDistric">物联智慧社区警网共治</span> -->
        <span>宁海路智慧社区平台</span>
      </div>
    <div class="logout-box">
      <div class="box-login">
        <div class="box-avatar">
          <img class="avatar" src="../../assets/images/avatar.png" />
        </div>
        <div class="box-txt">欢迎登录</div>
        <div class="box-icon">
          <span class="iconfont icon-arrow-down"></span>
          <span class="iconfont icon-arrow-up"></span>
        </div>
      </div>
      <div @click="logoutEvent" class="box-ctx">退出</div>
    </div>
  </div>
</template>
<script>
import { delCookie } from "@/config/cookie";
import { mapActions } from "vuex";
export default {
  name: "xpagetitle",
  data() {
    return {
      titleBg: require("@/assets/images/shouye_top_bg.png")
    };
  },
  props: {
    isShowDistric:{
      type:Boolean,
      default:false
    },
    title: {
      type: String,
      default: "无锡市"
    }
  },

  methods: {
    ...mapActions(["DeviceFilters/GetSliderItemAction"]),
    logoutEvent() {
      this.$confirm("是否确认退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$storage.remove("user");
          this.$storage.remove("tree");
          delCookie("isLogin");
          this["DeviceFilters/GetSliderItemAction"]();
          this.$router.replace({ path: "/login" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.x-page {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 6.675rem;
  text-align: center;
  background-repeat: no-repeat;
  .title {
    text-align: center;
    font-size: 2.4rem;
    line-height: 5.5rem;
    font-weight: 500;
    color: #c9fbfe;
  }
  .logout-box {
    position: absolute;
    top: 1rem;
    right: 12.5rem;
    padding: 0.5rem 0;
    box-sizing: border-box;
    &:hover {
      .box-ctx {
        display: block;
      }
      .box-login .box-icon > .iconfont.icon-arrow-up {
        display: inline-block;
      }
      .box-login .box-icon > .iconfont.icon-arrow-down {
        display: none;
      }
    }
    .box-login {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .box-avatar {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
        overflow: hidden;
        .avatar {
          width: 100%;
          height: 100%;
        }
      }
      .box-txt {
        font-size: 0.8rem;
        color: #c9fbfe;
        margin: 0 0.6rem;
      }
      .box-icon {
        color: #c9fbfe;
        .iconfont {
          font-size: 0.75rem;
          &.icon-arrow-up {
            display: none;
          }
        }
      }
    }
    .box-ctx {
      display: none;
      width: 100%;
      position: absolute;
      top: 2.5rem;
      padding: 0.5rem;
      text-align: center;
      background: #c9fbfe;
      color: #404040;
      font-size: 0.8rem;
      cursor: pointer;
    }
  }
}
</style>
